<template>
  <div>
    <router-view />
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { getMenuList } from '@/utils/utils'
import { PACKAGE_NAME } from '@/global-config/const'
import { LocalStorageService, SessionStorageService } from '@/utils/storage'
import { store } from '@/store'

export default defineComponent({
  components: {
  },
  setup() {
    const router = useRouter()
    // 如果是vue3微前端子应用，这里需要删除 visibilitychange 监听
    const syncVuex = () => {
      const sessionOpenId = SessionStorageService.get(`${PACKAGE_NAME}OpenId`)
      const localData = LocalStorageService.get(`${PACKAGE_NAME}`)
      if (sessionOpenId && localData.openId && sessionOpenId !== localData.openId) {
        SessionStorageService.set(`${PACKAGE_NAME}OpenId`, localData.openId)
        window.location.reload()
      }
      LocalStorageService.get(PACKAGE_NAME) && store.replaceState(LocalStorageService.get(PACKAGE_NAME))
    }
    window.addEventListener('visibilitychange', syncVuex)
    onBeforeMount(async () => {
      await getMenuList(false, router)
    })
    // 如果是vue3微前端子应用，这里需要删除 visibilitychange 监听
    onUnmounted(() => {
      window.removeEventListener('visibilitychange', syncVuex)
    })
    return {
    }
  },
})
</script>

<style lang="less">
</style>
